<template>

    <view class="category-goods">
    	<view class="goods-img">
    		<image :src="goods.img" mode="aspectFill"></image>
    	</view>
    	<view class="goods-info">
    		<view class="goods-title">
    			{{goods.introduce}}
    		</view>
    		<view class="goods-type">
    			<text>{{goods.information}}</text>
    			<text>{{goods.typeinfo}}</text>
    			
    		</view>
			<view class="select-type" v-if="type===1">
				{{goods.choose}}
			</view>
    		<view class="price-button">
    			
    		
    		<view class="goods-price">
    			<view class="now-price">
    				￥{{formatNum(goods.price,{numb:2})}}
    			</view>
    			<view class="old-price">
    			￥{{formatNum(goods.oldPrice ,{numb:2})}}
    				
    			</view>
    			
    		</view>
			<template v-if="type===0">
				<button @click="goodsToast(goods)" >抢购</button>
				
			</template>
			<template v-else-if="type===1">
				<!-- <view class="goods-add">
					jjj
				</view> -->
					<view class="goods-card-count-numb">
						<view class="reduce" @click.stop="reduceNum_">
							
							－
						</view>
						<view class="count"><input type="text" v-model="goods.goodsNum"/></view>
						<view class="enhance" @click.stop="enhanceNum_">
							＋
						</view>
						
					</view>
				
			</template>
    		
    		</view>
    	</view>
    </view>

</template>

<script setup>
	import { formatNum } from '@/utils/numbformat';
	import { useShopeList } from '@/store/shopData/useShop';
	const useShop=useShopeList()
	const {goods,type,index}=defineProps(['goods','type','index'])
	const emit=defineEmits(['toastgoods'])
	function goodsToast(goods){
		emit('toastgoods',goods)
	}
	function reduceNum_(){
		
		goods.goodsNum--
		const index = useShop.buyCarList.indexOf(goods);
		if (index > -1&&goods.goodsNum<1) {
		  useShop.buyCarList.splice(index, 1); 
		}
		// if(goods.goodsNum<1)
		// {useShop.buyCarList.pop(goods)
		//  }
	}
	function enhanceNum_(){
		goods.goodsNum++
	}
	console.log(goods);
</script>

<style lang="scss" scoped>
	.category-goods{
		width: 100%;

		display: flex;
		justify-content: flex-start;
		margin-bottom: 20rpx;
			gap: 18rpx;
		.goods-img{
			width: 180rpx;
			height: 180rpx;
			flex-shrink: 0;
			image{
				width: 180rpx;
				height: 180rpx;
			}
		}
		.goods-info{
			flex: 1;
		
				
			.goods-title{
				@include text-ellipsis(1);
			}
			.goods-type{
				font-size: 22rpx;
				
				color: rgba(153, 153, 153, 1);
				text{
					padding-right: 10rpx;
				}
			}
			.select-type{
				margin-top: 6rpx;
				
				background-color: rgba(244, 244, 244, 1);
				width: 106rpx;
				height: 34rpx;
				color: black;
				font-size: 20rpx;
				@include text-ellipsis(1);
			}
			.price-button{
				display: flex;
				justify-content: space-between;
				align-items: center;
				.goods-price{
					display: flex;
					flex-direction: column;
					align-items: center;
				}
				.now-price{
					font-size: 36rpx;
					font-weight: 500;
					color:  rgba(255, 15, 35, 1);
				}
				.old-price{
					font-size: 20rpx;
					   text-decoration: line-through;
					  color: rgba(187, 187, 187, 1);
					
				}
				button{
					width: 102rpx;
					height: 40rpx;
					border-radius: 16rpx;
					font-size: 23rpx;
					line-height: 40rpx;
					color: rgba(255, 255, 255, 1);
					background-color: pink;
	
				}
				.goods-card-count-numb{
							min-width: 300rpx;
					display: flex;
					
					justify-content: center;
					align-items: start;
					text-align: center;
					gap: 20rpx;
					
					.reduce,.enhance{
						z-index: 10;
						width: 40rpx;
						height: 40rpx;
						line-height: 40rpx;
						border-radius: 50%;
						background-color: #fff;
						border: 1px solid palevioletred;
						
						
					}
					:deep(.uni-input-input) {
						width: 40rpx !important;
					}
					
				}
			}
		}
		.goods-add{
			width: 200rpx;
			height: 300rpx;
			background-color: #194eff;
		}
	}
</style>